﻿<div class="WAll PT">

	<div class="ContentBlockTitle">简单卡片</div>	
	<div class="Box">
		<div class="BoxContent">
			<div class="BoxContentInner">这是简单的卡片与纯文本。但是卡可以包含它自己的头，尾，列表视图，图像，和任何元素。</div>
		</div>
	</div>
	<div class="Box">
		<div class="BoxHeader">卡片头</div>
		<div class="BoxContent">
			<div class="BoxContentInner">带有标题和尾的卡片。卡片头是用来显示卡的标题和脚注的一些附加信息或自定义操作。</div>
		</div>
		<div class="BoxFooter">卡片尾</div>
	</div>
	<div class="ContentBlockTitle">风格卡片</div>	
	<div class="Box BoxHeaderPic">
		<div class="BoxHeader NoBorder CW" style="background-image:url(images/03.jpg)" valign="bottom">山之旅</div>
		<div class="BoxContent">
			<div class="BoxContentInner">带有标题和尾的卡片。卡片头是用来显示卡的标题和脚注的一些附加信息或自定义操作。</div>
		</div>
		<div class="BoxFooter" valign="top">
			<a href="javascript:;" class="Link">喜欢</a>
			<a href="javascript:;" class="Link">查看更多</a>
		</div>
	</div>
	<div class="ContentBlockTitle">用户卡片</div>
	
	<div class="Box BoxUserInfo">
		<div class="BoxHeader NoBorder">
			<div class="Avatar"><img src="images/01.jpg" width="34" height="34"/></div>
			<div class="Name">姓名</div>
			<div class="Date">12/20 13:47</div>
		</div>
		<div class="BoxContent">
			<img src="images/03.jpg" width="100%" class="Img"/>
		</div>
		<div class="BoxFooter NoBorder">
			<a href="javascript:;" class="Link">喜欢</a>
			<a href="javascript:;" class="Link">评论</a>
			<a href="javascript:;" class="Link">更多</a>
		</div>
	</div>
	
	<div class="Box BoxUserInfo">
		<div class="BoxHeader">
			<div class="Avatar"><img src="images/01.jpg" width="34" height="34"/></div>
			<div class="Name">姓名</div>
			<div class="Date">12/20 13:47</div>
		</div>
		<div class="BoxContent">
			<div class="BoxContentInner">
				<p>我昨天拍了一张漂亮的照片！</p>
				<img src="images/03.jpg" width="100%" class="Img"/>
				<p class="CA">喜欢：112   评论：43</p>
			</div>
		</div>
		<div class="BoxFooter">
			<a href="javascript:;" class="Link">喜欢</a>
			<a href="javascript:;" class="Link">评论</a>
			<a href="javascript:;" class="Link">更多</a>
		</div>
	</div>
	
	<div class="ContentBlockTitle">有列表视图的卡片</div>
	
	<div class="Box">
		<div class="BoxContent">
			<ul class="ListBlock">
				<li class="ListItem">
					<div class="ItemLink ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Ivan Petrov
							</div>
							<div class="ItemAfter">
							CEO
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemLink ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							John Doe
							</div>
							<div class="ItemAfter">
							<span class="Badge BadgeSuccess">13</span>
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemDivider">列表分割</div>
				</li>
				<li class="ListItem">
					<div class="ItemLink ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							John Doe
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	
	<ul class="ListBlock BoxList">
		<li class="ListItem Box">
			<div class="BoxHeader">
				页眉
			</div>
			<div class="BoxContent">
				<div class="BoxContentInner">
					内容
				</div>
			</div>
			<div class="BoxFooter">
				页脚
			</div>
		</li>
		<li class="ListItem Box">
			<div class="BoxHeader">
				页眉
			</div>
			<div class="BoxContent">
				<div class="BoxContentInner">
					内容
				</div>
			</div>
			<div class="BoxFooter">
				页脚
			</div>
		</li>
	</ul>
	
	<div class="Box">
		<div class="BoxHeader">新版本</div>
		<div class="BoxContent">
			<ul class="ListBlock MediaList">
				<li class="ListItem">
					<a href="javascript:;" class="ItemCon InkRipple">
						<div class="ItemMedia"><img src="images/01.jpg" width="44"/></div>
						<div class="ItemInner">
							<div class="ItemTitleRow">
								<div class="ItemTitle">黄色潜艇</div>
							</div>
							<div class="ItemSubtitle">披头士乐队</div>
						</div>
					</a>
				</li>
				<li class="ListItem">
					<a href="javascript:;" class="ItemLink ItemCon InkRipple">
						<div class="ItemMedia"><img src="images/02.jpg" width="44"/></div>
						<div class="ItemInner">
							<div class="ItemTitleRow">
								<div class="ItemTitle">不要阻止我</div>
							</div>
							<div class="ItemSubtitle">女王</div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="BoxFooter">
			<span>2015年1月20日</span>
			<span>评论 5</span>
		</div>
	</div>
	
	<div class="ContentBlockTitle">块级卡片</div>
	<div class="Box BoxBlock">
		<div class="BoxHeader">卡片头</div>
		<div class="BoxContent">
			<div class="BoxContentInner">带有标题和尾的卡片。卡片头是用来显示卡的标题和脚注的一些附加信息或自定义操作。</div>
		</div>
		<div class="BoxFooter">卡片尾</div>
	</div>

</div>




















